v-app#app(v-if="drawer")
    div#nodeTree
        v-container#hierarchy
            v-text-field(v-model="treeSearchText",dense,label="搜索节点...",dark,flat,solo-inverted,hide-details,clearable,clear-icon="mdi-close-circle-outline")
            v-treeview(:items="treeData",item-key="id",dense,activatable,:search="treeSearchText",:active.sync="selectedNodes")
                template(v-slot:label="{ item, active }")
                    label(v-if="item.active",style="color: white;") {{item.name}}
                    label(v-else,style="color: gray;") {{ item.name }}

        v-container#inspector
            template(v-if="selectedNode")
                //- 节点
                table(style="width: 100%;color: white;",border="1")
                    thead
                        tr
                            th(colspan="2",style="text-align: left; padding: 10px;")
                                div.float-left(style="display:inline-flex;")
                                    v-simple-checkbox(v-model="selectedNode.active")
                                    span(style="margin-left: 10px;") {{ nodeSchema.title }}
                                div.float-right
                                    v-icon(style="margin-left: 10px;margin-right: 10px;",@click="drawNodeRect()") mdi-adjust
                                    v-icon(@click="outputNodeHandler()") mdi-send
                    tbody
                        tr(v-for="row in nodeSchema.rows",:key="row.key")
                            td(style="padding: 10px;width: 40%;") {{ row.name }}
                            td(style="width: 60%;")
                                v-color-picker(v-if="row.type == 'color'",class="ma-2",canvas-height="80",width="259",v-model="selectedNode[row.key]")
                                v-simple-checkbox(v-else-if="row.type == 'bool'",v-model="selectedNode[row.key]",style="padding: 10px;width: 100%;")
                                input(v-else,:type="row.type",v-model="selectedNode[row.key]",style="padding: 10px;width: 100%;")
                //- 组件
                table(v-for="component in componentsSchema",style="width: 100%;color: white;",border="1")
                    thead
                        tr
                            th(colspan="2",style="text-align: left; padding: 10px;")
                                div.float-left(style="display:inline-flex;")
                                    v-simple-checkbox(v-model="selectedNode[component.key].enabled")
                                    span(style="margin-left: 10px;") {{ component.title }}
                                div.float-right
                                    v-icon(@click="outputComponentHandler(component.key)") mdi-send
                    tbody
                        tr(v-for="row in component.rows",:key="row.key")
                            td(style="padding: 10px;width: 40%;") {{ row.name }}
                            td(style="width: 60%;")
                                v-color-picker(v-if="row.type == 'color'",class="ma-2",canvas-height="80",width="259",v-model="selectedNode[component.key][row.key]")
                                textarea(v-else-if="row.type == 'textarea'",rows="1",v-model="selectedNode[component.key][row.key]",style="padding: 10px;width: 100%;")
                                v-simple-checkbox(v-else-if="row.type == 'bool'",v-model="selectedNode[component.key][row.key]",style="padding: 10px;width: 100%;")
                                input(v-else,:type="row.type",v-model="selectedNode[component.key][row.key]",style="padding: 10px;width: 100%;")